import React, {useState, useEffect} from 'react';
import {Button, Divider, Table, Modal, Drawer, Space} from 'antd';
import {ColumnsType} from "antd/lib/table";
import styles from './index.module.scss';
import {ExclamationCircleOutlined, PlusOutlined} from "@ant-design/icons";
import AntDIcon from "@/components/AntDIcon";
import {MenuItem} from "@/common/interfaces/menu";
import {IParam} from "@/common/interfaces";
import {apiQueryMenuList} from "@/common/apis/menu-api";
import CreateMenuForm from "@/pages/resource/menu/components/CreateMenuForm";
import UpdateMenuForm from "@/pages/resource/menu/components/UpdateMenuForm";

const {confirm} = Modal;

const TableList: React.FC<any> = () => {

  const [row, setRow] = useState<MenuItem>();
  const [loading, setLoading] = useState<boolean>(false);
  const [stepFormValues, setStepFormValues] = useState<MenuItem>();
  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
  const [updateModalVisible, setUpdateModalVisible] = useState<boolean>(false);

  const [menuList, setMenuList] = useState<MenuItem[]>([])
  const [params, setParams] = useState<IParam>({page: 1, size: 10});

  useEffect(() => {
    setLoading(true);
    apiQueryMenuList({}).then(res => {
      // setMenuList(res.data || []);
    }).finally(() => setLoading(false));
  }, [params]);

  const showDeleteConfirm = (id: number) => {
    confirm({
      title: '是否删除记录?',
      icon: <ExclamationCircleOutlined/>,
      content: '删除的记录不能恢复,请确认!',
      onOk() {
        // handleRemoveOne(id).then((r) => {
        //   actionRef.current?.reloadAndRest?.();
        // });
      },
      onCancel() {
      },
    });
  };

  const columns: ColumnsType<MenuItem> = [
    {
      title: '菜单名称',
      key: 'name',
      dataIndex: 'name',
      align: "center",
      render: (value, record, index) => {
        return <a onClick={() => setRow(record)}>{value}</a>;
      },
    },
    {
      title: '图标',
      key: 'icon',
      dataIndex: 'icon',
      align: "center",
      render: (value, record, index) => {
        return <AntDIcon type={value}/>;
      },
    },
    {
      title: '创建人',
      key: 'createBy',
      dataIndex: 'createBy',
      align: "center",
    },
    {
      title: '创建时间',
      key: 'createAt',
      dataIndex: 'createAt',
      align: "center",
    },
    {
      title: '更新人',
      key: 'updateBy',
      dataIndex: 'updateBy',
      align: "center",
    },
    {
      title: '更新时间',
      key: 'updateAt',
      dataIndex: 'updateAt',
      align: "center",
    },
    {
      title: '操作',
      dataIndex: 'option',
      align: "center",
      render: (_, record) => (
        <>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              setUpdateModalVisible(true);
              setStepFormValues(record);
            }}>
            编辑
          </Button>
          <Divider type="vertical"/>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              setCreateModalVisible(true);
              setStepFormValues(record);
            }}>
            添加子菜单
          </Button>
          <Divider type="vertical"/>
          <Button
            type="primary"
            danger
            size="small"
            onClick={() => {
              showDeleteConfirm(record.id);
            }}>
            删除
          </Button>
        </>
      ),
    },
  ];

  const renderToolBar = () => {
    return (
      <Space size={10}>
        <Button type="primary" onClick={() => setCreateModalVisible(true)}>
          <PlusOutlined/> 新建菜单
        </Button>
      </Space>
    )
  }

  return (
    <div className={styles.container}>
      <div className={styles.toolBar}>{renderToolBar()}</div>

      <Table
        rowKey={"id"}
        columns={columns}
        dataSource={menuList}
      />

      <CreateMenuForm
        key={'CreateMenuForm'}
        onSubmit={async (value) => {
          /* const success = await handleAdd(value);
           if (success) {
             handleModalVisible(false);
             setStepFormValues(undefined);
             if (actionRef.current) {
               actionRef.current.reload();
             }
           }*/
        }}
        onCancel={() => {
          setCreateModalVisible(false);
          setStepFormValues(undefined);
        }}
        createModalVisible={createModalVisible}
        parentId={stepFormValues?.id || 0}
      />

      <UpdateMenuForm
        key={'UpdateMenuForm'}
        onSubmit={async (value) => {
          /*const success = await handleUpdate(value);
          if (success) {
            handleUpdateModalVisible(false);
            setStepFormValues(undefined);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }*/
        }}
        onCancel={() => {
          setUpdateModalVisible(false);
          setStepFormValues(undefined);
        }}
        updateModalVisible={updateModalVisible}
        currentData={stepFormValues || {}}
      />

      <Drawer
        width={600}
        visible={!!row}
        onClose={() => {
          setRow(undefined);
        }}
        closable={false}
      >
        {row?.id && (2121
          /* <ProDescriptions<MenuItem>
             column={2}
             title={row?.id}
             request={async () => ({
               data: row || {},
             })}
             params={{
               id: row?.id,
             }}
             columns={columns}
           />*/
        )}
      </Drawer>
    </div>
  )
}

export default TableList
